<template>
  <div>
    <div
      style="line-height: 40px; font-size: 22px; font-weight: 600; padding: 5px"
    >
      SAC风险分析
    </div>
    <div class="layer">
      <el-row>
        <el-col :span="4">
          <div class="grid-content bg-purple">发生日期-起:</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <el-select v-model="value" placeholder="-空-" size="mini">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">发生日期-至:</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <el-select v-model="value" placeholder="-空-" size="mini">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="4">
          <div class="grid-content bg-purple">事件状态:</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <el-select v-model="value" placeholder="-空-" size="mini">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-light">
            <el-button type="primary" icon="el-icon-search" class="btn"
              >搜索</el-button
            >
            <el-button type="primary" icon="el-icon-search" class="btn"
              >打印</el-button
            >
            <el-button type="primary" icon="el-icon-search" class="btn"
              >下载</el-button
            >
          </div>
        </el-col>
      </el-row>
      <el-table :data="tableData" style="width: 98%; margin: 10px">
        <el-table-column prop="date" label="类型" />
        <el-table-column prop="name" label="发生原因" />
        <el-table-column prop="date" label="次数" />
        <el-table-column prop="name" label="比例" />
      </el-table>
      <el-table :data="tableData" style="width: 98%; margin: 10px">
        <el-table-column prop="date" label="类型" />
        <el-table-column prop="name" label="发生原因" />
        <el-table-column prop="date" label="次数" />
        <el-table-column prop="name" label="比例" />
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      sex: "",
    };
  },

  mounted() {},
  methods: {},
};
</script>
<style scoped>
.el-row {
  margin: 0px 10px 0 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
.layer {
  margin: 10px 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #eeeeee;
  text-align: right;
  padding: 2px 10px;
  color: #555555;
  font-size: 12px;
}
.bg-purple-light {
  background: #f8f9fa;
}
.grid-content {
  height: 22px;
  border: 1px solid #dddddd;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
/deep/ .el-button {
  padding: 1px 10px;
  font-size: 8px;
  border-radius: 0;
}
.box-card {
  margin: 5px;
}
.el-card /deep/ .el-card__header {
  padding: 10px 20px;
  background-color: #e2e2e2;
}
.top-ipt {
  margin-left: 5px;
}
</style>